<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 元素遍历操作：针对DOM树中父元素进行遍历【父子级关系】 
		children() 功能：获取匹配元素集合中每个元素的直接子元素
		parent() 功能：获取匹配元素集合中每个元素的直接父元素
		
		siblings() 功能：获取匹配元素中每个元素的所有兄弟元素
		
		next() 功能：获取匹配集合元素中每个元素中下一个兄弟元素
		prev() 功能：获取匹配集合元素中每个元素中上一个兄弟元素
		
		each() 功能：遍历匹配元素集合 对每个元素执行指定函数
		-->
		<style>
			.container{
				border: 1px solid red;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background-color: aqua;
				margin: 10px;
				padding: 10px;
			}
			button{
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
		</div>
			<button id="getcrbtn">获取直接子元素</button>
			<button id="getpbtn">获取直接父元素</button>
			<button id="getsbtn">获取兄弟元素</button>
			<button id="getnbtn">获取下兄弟元素</button>
			<button id="getprbtn">获取上兄弟元素</button>
			<button id="eachbtn">遍历元素</button>
		<script>
			/*1.点击 获取直接子元素 按钮 container父元素 给box元素加红边框*/ 
			$("#getcrbtn").click(function(){
				$(".container").children().css("border","10px solid #ff0");
			});
			$("#getpbtn").click(function(){
				$(".box").parent().css("background-color","#ff0");
			});
			/*3.点击 获取兄弟元素 按钮 box3的兄弟元素  加背景颜色 */
			$("#getsbtn").click(function(){
				$("#box3").siblings().css("background-color","#ff94fe");
			});
			/*4.点击 获取下兄弟元素 按钮 box2的兄弟元素  加背景颜色 */
			$("#getnbtn").click(function(){
				$("#box2").next().css("background-color","#4fffb0");
			});
			/*5.点击 获取上兄弟元素 按钮 box4的兄弟元素  加背景颜色 */
			$("#getprbtn").click(function(){
				$("#box4").prev().css({"height":"200px","width":"200px",
				"border-radius":"50%",
				"box-shadow":"5px 5px 5px #cbcbcb",
				"font-size":"10px",
				"line-height":"200px",
				"text-align":"center"
				});
			});
			/*6.点击 遍历元素 按钮 实现 动态输出这是box1.....
			each(function(index,element){ 传入下标${index}}
			注意：千万别加单双引号 别加拼接符号
			)
			*/ 
		   $("#eachbtn").click(function(){
			  $(".box").each(function(i,e){ // 下标| e 元素 ---形参
				  $(e).text(`这是第${i+1}盒子`);
			  }); 
		   });
		</script>
		
	</body>
</html>